<template>
<div class="wrap">
  <div class="ScaleBox" ref="ScaleBox" :style="{  width,  height   }">
    <div class="header">
      <h4>大屏测试版1</h4>
    </div>
    <div class="main">
      思路:
      1.初始化的时候获得大屏幕的比例
      2.把这个比例设置给css的scale变量
      3.监听浏览器的窗口大小, 将新的比例赋给scale变量
      这样不管屏幕有多大，分辨率有多高，只要屏幕的比例跟你定的比例一致，就都能适配了
    </div>
    <div class="footer">
      尾部方案
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 1920
    },
    height: {
      type: Number,
      default: 1080
    }
  },

  data() {
    return {
      scale: null
    };
  },
  mounted() {
    this.setScale();
    window.addEventListener("resize", this.setScale);
  },
  methods: {
    getScale() {
      const {
        width,
        height
      } = this;
      console.log(window.innerWidth, window.innerHeight, 'window')
      console.log(width, height, 'addEventListener')
      let ww = window.innerWidth / width;
      let wh = window.innerHeight / height;
      return ww < wh ? ww : wh;
    },
    setScale() {
      if (!this.getScale() || !this.$refs.ScaleBox.style) return
      this.scale = this.getScale();
      this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
    },
    debounce(fn, delay) {
      let delays = delay || 500;
      let timer;
      return function () {
        let th = this;
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    }
  }

}
</script>

<style lang="less" scoped>
* {
  border: 1px solid;
}

#ScaleBox {
  --scale: 1;
}

.wrap {
  background: #eee;
  width: 100%;
}

.ScaleBox {
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  height: 100%;
  flex-direction: column;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;

  .header {
    width: 100%;

  }

}
</style>
